import React, { useEffect, useState,useRef } from 'react'
import style from'./option.module.scss'
import classNames from 'classnames'
import {useCount} from '../hooks/useCount'


const Option = (props) => {
  const {time,stop,isRunning} = useCount(1000 * 5)
  useEffect(() => {
    if(!isRunning) {
      props.onSubmit()
    }
  },[isRunning])
  return (
    <div className={style.loading}>
      <div className={style.title}>
        <h2>答题卡</h2>
        <p>{time}</p>
      </div>
      <div className={style.option}>
        {props.list.map((it,index) => 
          <button 
          key={index}
          className={classNames({ [style.active]:it.answer })} 
          onClick={() => props.onJump(index)}
          >{index + 1}</button>
        )}
      </div>
      {props.total !== null && <div>总分：{props.total}</div>}
      <button 
      onClick={() =>{
        stop()
        props.onSubmit()
      }} 
      disabled={props.isFinish}
      >提交</button>
    </div>
  )
}

export default Option